<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/app.css" />
		<style>
			.mui-radio input[type=radio]:checked:before {
				content: '\e442';
			}

			.mui-checkbox input[type=checkbox]:checked:before,
			.mui-radio input[type=radio]:checked:before {
				color: #e02e22;
			}

			.ls {}

			.ls-item {
				background-color: #fff;
				margin-bottom: 10px;
			}

			.ls-item .top {
				text-align: right;
				padding-top: 10px;
			}

			.ls-item .top:nth-child(1) {
				margin-right: 10px;
			}

			.ls-item .mid {
				padding: 10px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #e1e1e1;
			}

			.ls-item .mid .left {}

			.ls-item .mid .left .name-phone {
				margin-bottom: 10px;
			}

			.ls-item .bottom {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 10px;
			}

			.ls-item .bottom label {
				color: #9c9c9c;
			}

			.ls-item .bottom .active label {
				color: #e02e22;
			}

			#addAddress {
				position: fixed;
				bottom: 50px;
				left: 10px;
				right: 10px;
			}

			.main {}

			.mui-popup-button {
				color: red;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">收货地址</h1>
		</header>
		<div class="mui-content">
			<div class="main">
				<div class="ls">



				</div>
			</div>

		</div>

		<button id="addAddress" type="button" class="mui-btn mui-btn-danger">
			<span class="mui-icon mui-icon-plus"></span>
			添加收货地址
		</button>

		<script src="js/mui.min.js"></script>
		<script src="libs/app.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init()
			mui.plusReady(function() {
				var dataList = []
				var ls = document.querySelector(".ls")
				var self = plus.webview.currentWebview()

				post('/api/address/list').then(res => {
					console.log(res);
					var data = res.data
					// {
					//           "id": 2,
					//           "user_id": 5,
					//           "consignee": "徐乾坤",
					//           "mobile": "19852675088",
					//           "province": "江苏省",
					//           "city": "常州市",
					//           "district": "武进区",
					//           "address": "红莲路 77号",
					//           "is_default": 1,
					//           "deletetime": null
					//       }

					if (res.code) {
						var s = ''
						if (data.length > 0) {
							dataList = data
							data.forEach((e,i) => {
								s += `<div class="ls-item">
			    		<div class="top">
			    			<span data-id="${e.id}"  class="mui-icon mui-icon-arrowthinup"></span>
			    			<span data-id="${e.id}"  class="mui-icon mui-icon-closeempty"></span>
			    		</div>
			    		<div class="mid">
			    			<div class="left">
			    				<div class="name-phone">
			    					${e.consignee}, ${e.mobile}
			    				</div>
			    				<div class="address">
			    					${e.province} ${e.city} ${e.district} ${e.address}
			    				</div>
			    			</div>
			    			<button data-index="${i}" data-id="${e.id}" type="button" class="mui-btn yes">使用</button>
			    		</div>
			    		<div class="bottom">
			    			<div class="mui-input-row mui-radio mui-left">
			    				<label>默认</label>
			    				<input data-id="${e.id}"  name="radio" type="radio" ${e.is_default==1?'checked':''}>
			    			</div>
			    			<div class="rigth">
			    				<button  data-id="${e.id}"  type="button" class="mui-btn fz">复制</button>
			    				<button  data-id="${e.id}"  type="button" class="mui-btn edit">修改</button>
			    			</div>
			    		</div>
			    	</div>`
							})

							ls.innerHTML = s

							mui('.ls').on('tap', '.ls-item .mui-icon-arrowthinup', function() {
								mui.alert('暂未开发', '提示', '确认', function(e) {
									e.index
								}, 'div')
							})

							mui('.ls').on('tap', '.ls-item .mui-icon-closeempty', function() {
								var id = this.getAttribute('data-id')
								mui.confirm('你确定要删除该地址吗？', '提示', ['取消', '确认'], function(e) {
									if (e.index) {
										post('/api/address/del', {
											id
										}).then(res => {
											if (res.code) {
												window.location.reload()
												mui.toast('删除地址成功')
											}
										})
									}
								}, 'div')

							})

							mui('.ls').on('change', '.ls-item .mui-input-row>input', function() {
								var id = this.getAttribute('data-id')
								post('/api/address/setdefault', {
									id
								}).then(res => {
									console.log(res);
									if (res.code) {
										mui.toast('修改默认地址成功')
									}
								})

							})

							mui('.ls').on('change', '.ls-item .mui-input-row>input', function() {
								var id = this.getAttribute('data-id')
								post('/api/address/setdefault', {
									id
								}).then(res => {
									console.log(res);
									if (res.code) {
										mui.toast('修改默认地址成功')
									}
								})

							})

							mui('.ls').on('tap', '.ls-item .yes', function() {
								var id = this.getAttribute('data-id')
								var index = this.getAttribute('data-index')
								var item =  data[index]
								var address =
									`${item.consignee},${item.mobile},${item.province}${item.city}${item.district}${item.address}`
								mui.fire(self.opener(), 'updateAddress', {
									id:id,
									address:address
								})

							})
						}
					}
				})
			})
		</script>
	</body>

</html>